<template>
  <div class="capacitymanagement_box" ref="capacitymanagement">
    <!-- 头部搜索部分 -->
    <div class="orderHeader">
      <div class="orderSearch">
        <el-form ref="form" :model="orderSearch" :inline="true">
          <el-row :gutter="24">
            <el-col :span="5">
              <el-form-item label="始发地" size="mini">
                <el-select
                  v-model="orderSearch.placedeparture"
                  placeholder="请选择出发地"
                  filterable
                  remote
                  reserve-keyword
                  :remote-method="Pageregionbox"
                >
                  <el-option
                    v-for="item in regionboxList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="目的地" size="mini">
                <el-select
                  v-model="orderSearch.destination"
                  placeholder="请选择目的地"
                  filterable
                  remote
                  reserve-keyword
                  :remote-method="Pageregionbox"
                >
                  <el-option
                    v-for="item in regionboxList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="ToOpenedListClickFn(1, 10)"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh-left">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div
      class="actions"
      style="margin-bottom: 10px; height: 30px; margin-top: 20px"
    >
      <div class="left">
        <el-button size="mini" type="primary" @click="RefusetoopenClickFn"
          >拒绝开通</el-button
        >
      </div>
      <div class="right">
        <el-pagination
          small
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalListNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      border
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="55"> </el-table-column>
      <el-table-column property="from_region" label="始发地" width="350">
      </el-table-column>
      <el-table-column property="to_region" label="目的地" width="350">
      </el-table-column>
      <el-table-column property="node_type" label="类型" width="220">
        <template slot-scope="scope">
          <span>{{
            scope.row.node_type === "1"
              ? "揽收"
              : scope.row.node_type === "3"
              ? "干线"
              : scope.row.node_type === "4"
              ? "配送"
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column property="creator_name" label="申请人" width="200">
      </el-table-column>
      <el-table-column property="refuse_reason" label="拒绝原因" width="320">
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="addLineClickFn(scope.row)"
            >开通线路</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="申请线路开通"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="36.5%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 100%"
      >
        <el-form-item label="类型" prop="getType">
          <el-select
            v-model="ruleForm.getType"
            placeholder="请选择类型"
            @change="changeClickFn"
          >
            <el-option
              v-for="(item, index) in OpitonsData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="承运商" prop="Carrier">
          <el-select v-model="ruleForm.Carrier">
            <el-option
              v-for="item in companyData"
              :label="item.name"
              :value="item.id + ''"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <div v-if="selectFlagShow === true">
          <el-form-item label="出发地" prop="placedeparture">
            <el-select
              v-model="ruleForm.placedeparture"
              filterable
              remote
              reserve-keyword
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目的地" prop="destination">
            <el-select
              v-model="ruleForm.destination"
              filterable
              remote
              reserve-keyword
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="地区范围" prop="Regionalscope">
            <el-select
              v-model="ruleForm.Regionalscope"
              filterable
              remote
              reserve-keyword
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="时效" prop="prescription">
          <el-input v-model="ruleForm.prescription"></el-input>
        </el-form-item>
        <el-form-item label="税点" prop="Taxpoint">
          <el-input v-model="ruleForm.Taxpoint"></el-input>
        </el-form-item>
        <div style="width: 100%; float: left">
          <el-form-item label="应收" prop="offer" class="item_list">
            <el-select v-model="ruleForm.offer" @change="changeOfferClickFn">
              <el-option
                v-for="(item, index) in unitData"
                :key="index"
                :value="item.item_code"
                :label="item.item_name"
              ></el-option>
            </el-select>
          </el-form-item>
          <div v-if="selectFlagOfferShow === true" class="danjia">
            <el-form-item label="单价" prop="pracenumber">
              <el-input v-model="ruleForm.pracenumber"></el-input>
            </el-form-item>
          </div>
          <div class="KG_box" v-else>
            <el-form-item label="首重" prop="firstmeasure">
              <el-input v-model="ruleForm.firstmeasure"></el-input>
            </el-form-item>
            <el-form-item label="首价" prop="Firstprice">
              <el-input v-model="ruleForm.Firstprice"></el-input>
            </el-form-item>
            <el-form-item label="续价" prop="Continuationprice">
              <el-input v-model="ruleForm.Continuationprice"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="保险" prop="Insurance" class="baoxian">
          <el-select v-model="ruleForm.Insurance">
            <el-option
              v-for="(item, index) in InsuranceData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应付" prop="BillingID">
          <el-select v-model="ruleForm.BillingID">
            <el-option label="名称1" value="1">名称1</el-option>
            <el-option label="名称2" value="2">名称2</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="拒绝原因"
      :visible.sync="dialogVisibleReason"
      :close-on-click-modal="false"
      width="36.5%"
      :before-close="handleCloseReason"
    >
      <el-form
        :model="ruleFormReason"
        :rules="rulesReason"
        ref="ruleFormReason"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 100%"
      >
        <el-form-item label="拒绝原因" prop="Insurance">
          <el-input
            type="textarea"
            v-model="ruleFormReason.desc_Reason"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormReason"
            >立即创建</el-button
          >
          <el-button @click="dialogVisibleReason = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  regionbox,
  ToOpenedList,
  CarrierUtilCreate,
  ToOpenedRefuse,
} from "@/api/transportationtools";
import { reqDictionaryOptions } from "@/api/earlywarning";
import { carrierBox } from "@/api/waybill";
export default {
  name: "OrderHeader",
  data() {
    return {
      dialogVisible: false,
      dialogVisibleReason: false,
      selectFlagOfferShow: false,
      selectFlagShow: false,
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 20, //一页多少条
      multipleSelection: [],
      orderSearch: {
        placedeparture: "",
        destination: "",
      },
      ruleForm: {
        getType: "1",
        Carrier: "",
        placedeparture: "",
        destination: "",
        Regionalscope: "",
        prescription: "",
        Taxpoint: "",
        offer: "0",
        Insurance: "",
        BillingID: "",
        pracenumber: "",
        firstmeasure: "",
        Firstprice: "",
        Continuationprice: "",
      },
      rules: {},
      ruleFormReason: {
        desc_Reason: "",
      },
      rulesReason: {},
      tableData: [],
      regionboxList: [],
      OpitonsData: [],
      unitData: [],
      InsuranceData: [],
      AddlineID: "",
      orderIdNums: [],
      companyData: [],
    };
  },
  mounted() {
    this.ToOpenedListClickFn(this.pageNum, this.pageSize);
    this.changeClickFn("1");
    this.changeOfferClickFn("0");
    this.SelectOpitonsFn();
    this.SelectOpitonsUnitFn();
    this.SelectOpitonsInsuranceFn();
    carrierBox().then((res) => {
      this.companyData = res.data;
    });
  },
  methods: {
    // 地址的模糊搜索
    Pageregionbox(query) {
      if (query !== "") {
        setTimeout(async () => {
          let result = await regionbox({
            name: query,
          });
          this.regionboxList = result.data;
        }, 200);
      } else {
      }
    },
    //select的change事件
    changeClickFn(val) {
      let DataValue = val;
      if (DataValue === "3") {
        this.selectFlagShow = true;
      } else {
        this.selectFlagShow = false;
      }
    },
    //报价select操作
    changeOfferClickFn(val) {
      let offerData = val;
      if (offerData === "0") {
        this.selectFlagOfferShow = true;
      } else {
        this.selectFlagOfferShow = false;
      }
    },
    // 获取下拉框数据
    SelectOpitonsFn() {
      const data = {
        dictionary_code: "gettype",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.OpitonsData = res.data.list;
        }
      });
    },
    //单位下拉
    SelectOpitonsUnitFn() {
      const data = {
        dictionary_code: "Tool_unit",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.unitData = res.data.list;
        }
      });
    },
    //保险下拉
    SelectOpitonsInsuranceFn() {
      const data = {
        dictionary_code: "Insurance",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.InsuranceData = res.data.list;
        }
      });
    },
    //开通线路操作
    addLineClickFn(res) {
      this.dialogVisible = true;
      this.AddlineID = res.id;
    },
    //新增函数弹出框 关闭操作
    handleClose() {
      this.dialogVisible = false;
    },
    //新增弹出框保存按钮操作
    submitForm() {
      const data = {
        from_region_id:
          this.ruleForm.getType === "1" || this.ruleForm.getType === "4"
            ? this.ruleForm.Regionalscope.toString()
            : this.ruleForm.placedeparture.toString(),
        to_region_id:
          this.ruleForm.getType === "1" || this.ruleForm.getType === "4"
            ? ""
            : this.ruleForm.destination.toString(),
        carrier_id: this.ruleForm.Carrier,
        tax_number: this.ruleForm.Taxpoint,
        node_type: this.ruleForm.getType,
        is_insurance: this.ruleForm.Insurance,
        billing_way_id: "",
        valid_time: (this.ruleForm.prescription * 60).toString(),
        price: {
          price_type: this.ruleForm.offer,
          unit_price:
            this.ruleForm.offer === "0"
              ? (this.ruleForm.pracenumber * 1).toString()
              : "0",
          based_on_price:
            this.ruleForm.offer === "1"
              ? (this.ruleForm.Firstprice * 1).toString()
              : "0",
          further_price:
            this.ruleForm.offer === "1"
              ? (this.ruleForm.Continuationprice * 1).toString()
              : "0",
          first_measure:
            this.ruleForm.offer === "1"
              ? (this.ruleForm.firstmeasure * 1).toString()
              : "0",
        },
      };
      CarrierUtilCreate(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "创建成功",
            type: "success",
          });
          (this.ruleForm.getType = "1"),
            (this.ruleForm.Carrier = ""),
            (this.ruleForm.placedeparture = ""),
            (this.ruleForm.destination = ""),
            (this.ruleForm.Regionalscope = ""),
            (this.ruleForm.prescription = ""),
            (this.ruleForm.Taxpoint = ""),
            (this.ruleForm.offer = "1"),
            (this.ruleForm.Insurance = ""),
            (this.ruleForm.BillingID = ""),
            (this.ruleForm.pracenumber = ""),
            (this.ruleForm.firstmeasure = ""),
            (this.ruleForm.Firstprice = ""),
            (this.ruleForm.Continuationprice = ""),
            (this.dialogVisible = false);
          this.CarrierUtilListFn(this.pageNum, this.pageSize);
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
    //新增弹出框 重置按钮操作
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //select选中操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val.length > 0) {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          this.orderIdNums = this.multipleSelection.map((item) =>
            Number(item.id)
          );
        }
      } else {
        this.orderIdNums = [];
      }
    },
    //拒绝开通线路按钮
    RefusetoopenClickFn() {
      if (this.orderIdNums.length > 0) {
        this.dialogVisibleReason = true;
      } else {
        this.$message({
          message: "请至少选中一条线路拒绝开通！",
          type: "warning",
        });
      }
    },
    //拒绝开通关闭按钮
    handleCloseReason() {
      this.dialogVisibleReason = false;
    },
    //拒绝开通 保存按钮
    submitFormReason() {
      const data = {
        ids: this.orderIdNums,
        refuse_reason: this.ruleFormReason.desc_Reason,
      };
      ToOpenedRefuse(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "拒绝开通线路操作成功",
            type: "success",
          });
          this.dialogVisibleReason = false;
          this.ToOpenedListClickFn(this.pageNum, this.pageSize);
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
    //翻页函数
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.ToOpenedListClickFn(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.ToOpenedListClickFn(this.pageNum, this.pageSize);
    },
    ToOpenedListClickFn(pageNumval, pageSizeval) {
      const data = {
        from_region_id: this.orderSearch.placedeparture.toString(),
        to_region_id: this.orderSearch.destination.toString(),
        page: pageNumval,
        page_size: pageSizeval,
      };
      ToOpenedList(data).then((res) => {
        if (res.code === 10000) {
          this.tableData = res.data.list;
          this.pageNum = res.data.page;
          this.totalListNum = res.data.total;
          this.pageSize = res.data.page_size;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-form--inline .el-form-item {
  width: 290px !important;
}
/deep/.el-form--inline .el-form-item__content {
  width: 220px !important;
}
/deep/.el-row {
  padding: 0px !important;
  margin: 0px !important;
}
/deep/.menu_content {
  min-height: auto !important;
  padding-bottom: 0px !important;
}
/deep/.item_list {
  width: 200px;
  float: left;
}
.danjia {
  width: 251px;
  float: left;
}
/deep/.danjia .el-form-item__label {
  width: 50px !important;
}
/deep/.danjia .el-form-item__content {
  margin-left: 50px !important;
}
/deep/.baoxian {
  clear: both !important;
}
.KG_box {
  width: 390px;
  float: left;
}
/deep/.KG_box .el-form-item {
  width: 125px !important;
  float: left !important;
}
/deep/.KG_box .el-form-item__label {
  width: 50px !important;
}
/deep/.KG_box .el-form-item__content {
  width: 80px !important;
  margin-left: 50px !important;
}
.capacitymanagement_box {
  padding: 5px;
  background-color: #fff;
  height: calc(100vh - 25vh);
  .orderHeader {
    margin-top: 20px;
    border-bottom: 5px solid #e8f1f7;
  }
}
</style>